<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
</head>

<body>
    <script src="/static/crm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/static/crm/js/contract/contract.js"></script>
    <form class="layui-form layui-form-pane layui-container" lay-filter="form" action="">
        <div style="margin: 40px 20px 40px 20px">
            <fieldset class="table-search-fieldset " style="border: 2px solid rgb(144, 144, 143);">
                <legend style="color:rgb(144, 144, 143);">基本信息</legend>
                <div style="margin: 40px 20px 40px 20px">
                    <form class="layui-form layui-form-pane layui-container" lay-filter="formm" action="">
                        <div class="layui-form-item">
                            <div class="layui-row ">
                                <div class="layui-col-md4">
                                    <label class="layui-form-label">订单编号：</label>
                                    <div class="layui-input-inline">
                                        <input type="hidden" name="__token__" value="{$Request.token}" />
                                        <input type="text" name="number" autocomplete="off" class="layui-input" value="{$row.0.number}">
                                    </div>

                                    <label class="layui-form-label">订单名称：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" autocomplete="off" value="{$row.0.name}" class="layui-input">
                                    </div>

                                    <label class="layui-form-label">选择客户：</label>
                                    <div class="layui-input-inline">
                                        <select name="client_id" id="client_id" lay-verify="">
                                            <option value=""></option>
                                            {foreach $info as $key=>$vo }
                                            <option value="{$vo.id}"{if $vo.id==$row.0.ourclients.id} selected {/if}>{$vo.name}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                    <label class="layui-form-label">选择商机：</label>
                                    <div class="layui-input-inline">
                                        <select name="business" lay-verify="">
                                            <option value="{$row.0.cllist.id}">{$row.0.cllist.name}</option>
                                        </select>
                                        <!-- <input type="text" name="business" autocomplete="off" value="" class="layui-input"> -->
                                        <a id="bus" class="layui-btn layui-btn-sm layui-btn-black " >服务</a>
                                    </div>
                                </div>
                                <div class="layui-col-md4 layui-col-md-offset">
                                    <div class="layui-block">
                                        <label class="layui-form-label">订单金额：</label>
                                        <div class="layui-input-inline">
                                            <input type="number" name="money" autocomplete="off" value="{$row.0.money}" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-block">
                                        <label class="layui-form-label">回款金额：</label>
                                        <div class="layui-input-inline">
                                            <input type="number" name="deposit" autocomplete="off" value="{$row.0.deposit}" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-block">
                                        <label class="layui-form-label">创建时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="order_time" class="layui-input" id="test1"
                                                placeholder="年-月-日">
                                        </div>
                                    </div>
                                    <div class="layui-block">
                                        <label class="layui-form-label">开始时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="start_time" class="layui-input" id="test2"
                                                placeholder="年-月-日">
                                        </div>
                                    </div>
                                    <div class="layui-block">
                                        <label class="layui-form-label">结束时间：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="end_time" class="layui-input" id="test3"
                                                placeholder="年-月-日">
                                        </div>
                                    </div>

                                </div>

                                <div class="layui-col-md4 layui-col-md-offset">
                                    <div class="layui-block">
                                        <label class="layui-form-label">创建人</label>
                                        <div class="layui-input-inline">
                                            <select name="principal_id" lay-verify="">
                                                <option value=""></option>
                                                {foreach $salesman as $key=>$vo }
                                                <option value="{$vo.id}" {if $vo.id==$row.0.principal.id}  selected {/if}>{$vo.account}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-block">
                                        <label class="layui-form-label">跟进人：：</label>
                                        <div class="layui-input-inline">
                                            <select name="sale_id" lay-verify="">
                                                <option value=""></option>
                                                {foreach $salesman as $key=>$vo }
                                                <option value="{$vo.id}" {if $vo.id==$row.0.sale.id} selected {/if} >{$vo.account}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-block">
                                        <label class="layui-form-label">审批状态：</label>
                                        <div class="layui-input-inline">
                                            <select name="status" lay-verify="">
                                                <option value=""></option>
                                                <option value="0"{if $row.0.status=='交易中' } selected {/if}>交易中</option>
                                                <option value="1"{if $row.0.status=='交易成功' } selected {/if}>交易成功</option>
                                                <option value="2"{if $row.0.status=='回款成功' } selected {/if}>回款成功</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-block">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="remark：" value="{$row.0.remark}" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>

        </div>
        </fieldset>
        <fieldset class="table-search-fieldset " style="border: 2px solid rgb(144, 144, 143);">
            <legend style="color:rgb(144, 144, 143);">商品信息</legend>
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter">

            </table>

            <tr>
                <td>总价：￥<span id="total">0.00</span> </td>&nbsp;&nbsp;&nbsp;
                <td>优惠率%: <input type="number" name="discount" id="discount" max="99" style="width: 40px; "> </td>
                &nbsp;&nbsp;&nbsp;
                <td>订单总额：￥ <input type="text" name="subal" id="subal" disabled></td>
            </tr>
            <script type="text/html" id="toolEventDemo">
                        <a class="layui-btn  layui-btn-danger layui-btn-sm " lay-event="del" ><i class="layui-icon layui-icon-delete"></i>删除</a>
                </script>
            <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon  layui-icon-edit layui-icon-addition"></i> 添加 </a>
                    </div>
                </script>

            <!-- </form> -->
        </fieldset>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>

</html>
<script>
    layui.use(['laydate', 'jquery', 'form'], function () {
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;

        $("#bus").on("click", function () {
            var index = layer.open({
                type: 2,
                title: '商机信息',
                area: ['70%', '80%'],
                content: 'business',
                success: function (layero, index) {
                    var iframeWindow = window['layui-layer-iframe' + index]  //获取弹框页面
                    iframeWindow.layui.table.on('tool(currentTableFilter)', function (obj) {
                        var data = obj.data;
                        console.log(data);
                        obj.del();
                        layer.close(index);
                        form.val("form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            "client_id"  : data.client_id,
                            "business":  data.name,
                            "money":  data.money,
                            "status": data.status,
                            "sale_id": data.sale_id,
                            "principal_id": data.principal_id,
                            "order_time": data.predict_time,
                            });
                        // var _id = data['id'];
                            // userId += _id + ",";
                            // $.get('add?id=' + userId, function (res) {
                            //     if (res.errcode != 1) {

                            //         table.reload('currentTableId', {
                            //             scrollPos: 'fixed'
                            //         });
                            //     }
                            // })
                    })
                }
            })
        })
        var tableContent = new Array();
        table.render({
            elem: '#currentTableId',
            url: 'add',
            data: tableContent,
            toolbar: '#toolbarDemo',
            cols: [[
                { type: 'numbers', title: '序号', width: 80, sort: true },
                { field: 'name', title: '课程名称' },
                { field: 'price', title: '价格', width: 130, sort: true },
                { field: 'unit', width: 60, title: '单位' ,
                templet:function(d){
                        switch (d.unit) {
                            case 0:
                            return  '年';
                            break;

                            case 1:
                            return  '季';
                            break;

                            case 2:
                            return  '月';
                            break;

                            case 3:
                            return  '周';
                            break;

                            case 4:
                            return  '天';
                            break;

                            case 5:
                            return  '课时';
                            break;

                            case 6:
                            return  '学期';
                            break;
                        }
                        
                    }},
                { field: 'minute_hour', width: 90, title: '课时/分钟' }, // 一对多数据
                { field: 'major', templet:function(d){return d.major.name}, title: '专业' },
                { field: 'campus', templet:function(d){return d.campus.name}, title: '校区' },
                { field: 'campus', templet:function(d){return d.campus.address}, title: '校区地址' },
                { field: 'remark', title: '备注',edit:'textarea'},
                { title: '操作', minWidth: 100, toolbar: '#toolEventDemo', align: 'center', fixed: 'right' }
            ]],
            done: function (res, curr, count) {
                /**
                 * @Descripttion: 监听课程单元格事件
                 * @Date: 2022-12-04 11:38:32
                 */
                // table.on("edit(currentTableFilter)", function (obj) {
                // var price = obj.data.num * obj.data.price;
                // $(".layui-table-box tbody tr[data-index='" + 0 + "'] td[data-field='total'] .layui-table-cell").text(price);
                var dity = 0;
                if (layui.table.getData('currentTableId').length > 0) {
                    for (var i in layui.table.getData('currentTableId')) {
                        dity += parseFloat($(".layui-table-box tbody tr[data-index='" + i + "'] td[data-field='price'] .layui-table-cell").text())
                    }
                }
                $("#subal").val(returnFloat((dity)));
                $("#total").text(NumFormat(dity));
                $('#discount').keyup(function () {
                    var discounts = $(this).val()
                    var fina = dity * (discounts * 0.01);
                    $("#subal").val(NumFormat((fina)));
                    if ($("#subal").val() == 0.00) {
                        $("#subal").val(returnFloat((dity)));
                    }
                })
            }
        });


        //常规用法
        laydate.render({
            elem: '#test1'


        });
        laydate.render({
            elem: '#test2'

        });
        laydate.render({
            elem: '#test3'

        });
        $(".layui-table-tool-self .layui-inline").eq(1).hide();//不需要自带的打印功能
        $(".layui-table-tool-self .layui-inline").eq(2).hide();//不需要自带的打印功能
        $(".layui-table-tool-self .layui-inline").eq(3).hide();//不需要自带的打印功能
        table.on('tool(currentTableFilter)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                obj.del();

            } else if (layEvent === 'num') {
                console.log('1111');
            }

        });
        var courseId = '';
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    type: 2,
                    title: '商品信息',
                    area: ['70%', '80%'],
                    content: 'commodity',
                    success: function (layero, index) {
                        var iframeWindow = window['layui-layer-iframe' + index]  //获取弹框页面
                        iframeWindow.layui.table.on('tool(currentTableFilter)', function (obj) {
                            var data = obj.data;
                            var _id = data['id'];
                            if (obj.event === 'add') {
                                courseId += _id + ",";
                                $.get('add?id=' + courseId, function (res) {
                                        obj.del();
                                        layer.close(index);
                                        table.reload('currentTableId', {
                                            scrollPos: 'fixed'
                                    })
                                })

                            }
                        });

                    },
                });
            }
        })
     


        /**
         * @Descripttion: 提交
         * @Date: 2022-12-06 10:54:11
         * @param {*} submit
         * @param {*} function
         */
        form.on('submit(formDemo)', function (data) {
            var dity = layui.table.getData('currentTableId');
            function del(obj, keys) {
                keys.map(function (key) {
                    delete obj[key]
                })
                return obj
            }
            var discounts = $('#discount').val()
            var subal = $('#subal').val()

            var arr = Object.values(dity);
            // console.log(arr[0].unit);
           var commodity =[];
            if (arr.length > 0) {
                for (var i in arr) {
                    // arr[i].subtotal = $(".layui-table-box tbody tr[data-index='" + i + "'] td[data-field='subtotal'] .layui-table-cell").text();
                    // arr[i].units = arr[i].units['name'];
                    // arr[i]['shops_id'] = arr[i].id;
                    // arr[i] = del(arr[i], ['create_time', 'delete_time', 'update_time', 'type_id', 'inventory', 'units_id', 'num', 'subtotal', 'attr_id', 'id']);
                    commodity[i]={
                        'course_id':arr[i].id,
                        'price':arr[i].price,
                        'discount':discounts,
                        'subal':subal,
                        'unit':arr[i].unit,
                        'remark':arr[i].remark,
                        'minute_hour':arr[i].minute_hour,
                        'major_id':arr[i].major_id,
                        'campus_id':arr[i].campus_id,
                    }
                    console.log(commodity);
                }
            }
            $.ajax({
                url: 'add',
                type: 'POST',
                dataType: 'JSON',
                data: { 'tract': data.field, 'commodity': commodity },
                success: function (res) {
                    layer.msg(res.errmsg, {
                        time: 1500,
                        end: function () {
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        }
                    });

                }
            })
            return false;
        });

    });

</script>
